<template>
  <contentModel
    :title="rowData ? '编辑' : '新增'"
    class="com-dialog"
    :has-footer="true"
    @close="closed"
  >
    <div class="step-container">
      <a-steps
        :current="currentStep"
        type="navigation"
        :changeable="true"
        @change="stepChange"
      >
        <a-step>订单主信息</a-step>
        <a-step>订单明细</a-step>
        <!-- <a-step>付款节点</a-step> -->
        <a-step>订单附件</a-step>
        <a-step>订单正文</a-step>
      </a-steps>
    </div>
    <div class="step-main-container">
      <!-- 订单主信息 -->
      <div v-if="currentStep === 1">
        <main-info ref="mainInfoRef" :form-info="formInfo" />
      </div>
      <!-- 订单明细 -->
      <div v-if="currentStep === 2">
        <step-two :form-info="formInfo" @refresh="refresh" />
      </div>
      <!-- 付款节点 -->
      <!-- <div v-if="currentStep === 3">
        <step-three></step-three>
      </div> -->
      <!-- 订单附件 -->
      <div v-if="currentStep === 3">
        <step-four ref="stepFourRef" :form-info="formInfo" />
      </div>
      <!-- 订单正文 -->
      <div v-if="currentStep === 4">
        <step-five :form-info="formInfo" @success="success" />
      </div>
    </div>
    <template #footer>
      <a-button @click="closed">{{ '取消' }}</a-button>
      <a-button
        v-if="currentStep === 1 || currentStep === 3"
        type="primary"
        :disabled="importLoading"
        @click="save"
        >{{ '保存' }}</a-button
      >
    </template>
  </contentModel>
</template>

<script setup lang="ts">
  import { ref, defineProps, onMounted, defineEmits } from 'vue';
  import contentModel from '@/common/components/content-model/index.vue';
  import {
    saveOrder,
    eidtOrder,
    getPmsOrderInfo,
  } from '@/api/purchase-order/purchaseOrderPreparation';
  import { getDeptInfo } from '@/api/system/dept';
  import { Message } from '@arco-design/web-vue';
  import { useUserStore } from '@/store';
  import dayjs from 'dayjs';
  import mainInfo from './main-info.vue';
  import stepTwo from './step-two.vue';
  // import stepThree from './step-three.vue';
  import stepFour from './step-four.vue';
  import stepFive from './step-five.vue';

  const emit = defineEmits(['closeDrawer', 'success']);
  const props = defineProps({
    rowData: {
      type: Object,
      default: null,
    },
  });
  const stepFourRef = ref();
  const mainInfoRef = ref();
  const currentStep = ref(1);
  const formInfo = ref({
    id: '',
    editUserId: '',
    editUserCode: '',
    editUserName: '',
    editDeptId: '',
    editDeptName: '',
    editDateTime: '',
  });
  const userStore = ref();
  const importLoading = ref<boolean>(false);

  const refresh = (id: string) => {
    initData(id);
  };
  const initData = async (id: string) => {
    const res: any = await getPmsOrderInfo(id);
    if (res.code === 200) {
      formInfo.value = res.data;
    }
  };

  onMounted(async () => {
    userStore.value = useUserStore();
    console.log('userStore', userStore.value);
    if (props.rowData) {
      initData(props.rowData.id);
    } else {
      formInfo.value.editUserId = userStore.value.id || '';
      formInfo.value.editUserCode = userStore.value.userCode || '';
      formInfo.value.editUserName = userStore.value.username || '';
      formInfo.value.editDateTime = dayjs().format('YYYY-MM-DD');
      const res: any = await getDeptInfo(userStore.value.deptId);
      if (res.code === 200) {
        formInfo.value.editDeptName = res.data.name;
      }
    }
  });
  const stepChange = (step: number) => {
    if (currentStep.value === 1 && !formInfo.value.id) {
      Message.warning('请先保存订单主信息！');
      return;
    }
    currentStep.value = step;
  };
  // 保存
  const save = async () => {
    if (currentStep.value === 1) {
      const formVi = await mainInfoRef.value.formValidate();
      if (formVi) {
        return;
      }
      let res: any = null;
      if (formInfo.value.id) {
        const formData = {
          ...formInfo.value,
          ...mainInfoRef.value.getFormDate(),
        };
        res = await eidtOrder(formData);
      } else {
        const formData = { ...mainInfoRef.value.getFormDate() };
        formData.editUserId = userStore.value.id || '';
        formData.editUserCode = userStore.value.userCode || '';
        formData.editDeptId = userStore.value.deptId || '';
        formData.abroadFlag = formData.abroadFlag ? formData.abroadFlag : '';
        // 临时（需去除）
        formData.mdsVendorId = '0';
        formData.contractDesc = formData.contractDesc
          ? formData.contractDesc
          : '0';
        res = await saveOrder(formData);
      }
      if (res.success) {
        const id = formInfo.value.id ? formInfo.value.id : res.data;
        await initData(id);
        currentStep.value = 2;
      }
    }
    // 文件
    if (currentStep.value === 3) {
      const fileList = await stepFourRef.value.saveFile();
      if (fileList) {
        Message.success('文件保存成功');
        stepFourRef.value.initFile();
      }
    }
  };
  const success = () => {
    initData(props.rowData.id);
  };
  // 取消
  const closed = () => {
    emit('closeDrawer');
  };
</script>

<style lang="less" scoped>
  .step-container {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    height: 64px;
    margin-bottom: 16px;
    padding: 0 16px;
    background: #f7f9fc;
    border-radius: 8px;

    :deep(.arco-steps) {
      width: 100%;

      .arco-steps-item {
        margin: 0;
        padding: 0;

        &::after {
          display: none;
        }

        .arco-steps-item-node {
          display: none;
        }

        .arco-steps-item-content {
          &::after {
            right: 10px;
          }

          width: 100%;
          margin-bottom: 0;

          .arco-steps-item-title {
            width: calc(100% - 26px);
            text-align: center;
            border: 1px solid #d9dee7;
          }
        }
      }

      .arco-steps-item-active {
        .arco-steps-item-content {
          .arco-steps-item-title {
            color: #1e89ff;
            border: 1px solid #1e89ff !important;
          }
        }
      }
    }
  }

  .step-main-container {
    flex: 1;
    overflow-y: auto;
  }
</style>

<style lang="less">
  .com-dialog {
    .arco-modal-body {
      flex: 1;

      .content-con {
        display: flex;
        flex-direction: column;
        overflow: hidden;

        .arco-form {
          .arco-row {
            width: 100%;
          }
        }
      }
    }
  }
</style>
